<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Skeleton 骨架屏</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="../static/js/antd.min.js"></script> -->
	<script src="../static/js/antd.min.open.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">最简单的占位效果。</p>
	<a-skeleton></a-skeleton>
	<!-- <a-skeleton avatar :title="false" active></a-skeleton> -->
	
	<a-divider class="a-divi" orientation="left">复杂的组合</a-divider><!-- =============================================================== -->
	<p class="desc">更复杂的组合。</p>
	<a-skeleton avatar :paragraph="{ rows: 4 }"></a-skeleton>
	<a-divider></a-divider>
	<a-skeleton avatar :paragraph="{ rows: 4, width: ['20%', '40%', '60%', '80%'] }"></a-skeleton>
	
	<a-divider class="a-divi" orientation="left">动画效果</a-divider><!-- =============================================================== -->
	<p class="desc">显示动画效果。</p>
	<a-skeleton active></a-skeleton>
	
	<a-divider class="a-divi" orientation="left">包含子组件</a-divider><!-- =============================================================== -->
	<p class="desc">加载占位图包含子组件。</p>
	<a-space direction="vertical" style="width: 100%" :size="16">
		<a-skeleton :loading="loading1">
			<div>
				<h4>Ant Design Vue, a design language</h4>
				<p>
					We supply a series of design principles, practical patterns and high quality design
					resources (Sketch and Axure), to help people create their product prototypes beautifully
					and efficiently.
				</p>
			</div>
		</a-skeleton>
		<a-button :disabled="loading1" @click="showSkeleton">Show Skeleton</a-button>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">列表</a-divider><!-- =============================================================== -->
	<p class="desc">在列表组件中使用加载占位符。</p>
	<div>
		<a-switch :checked="!loading2" @change="onChange"></a-switch>
		<a-list item-layout="vertical" size="large" :data-source="listData">
			<template #renderItem="{ item }">
				<a-list-item key="item.title">
					<template v-if="!loading2" #actions>
						<span v-for="({ icon, text }, index) in actions" :key="index">
							<component :is="icon" style="margin-right: 8px;width: 1.2em;margin-bottom: -2px;"></component>
							{{ text }}
						</span>
					</template>
					<template #extra>
						<img v-if="!loading2" width="272" alt="logo" src="../static/img/xio.png" />
					</template>
					<a-skeleton :loading="loading2" active avatar>
						<a-list-item-meta :description="item.description">
							<template #title>
								<a :href="item.href">{{ item.title }}</a>
							</template>
							<template #avatar>
								<a-avatar :src="item.avatar"></a-avatar>
							</template>
						</a-list-item-meta>
						{{ item.content }}
					</a-skeleton>
				</a-list-item>
			</template>
		</a-list>
	</div>
	
	<a-divider class="a-divi" orientation="left">按钮/头像/输入框/图像</a-divider><!-- =============================================================== -->
	<p class="desc">骨架按钮、头像、输入框和图像。</p>
	<a-space>
		<a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block"></a-skeleton-button>
		<a-skeleton-avatar :active="active" :size="size" :shape="avatarShape"></a-skeleton-avatar>
		<a-skeleton-input style="width: 200px" :active="active" :size="size"></a-skeleton-input>
	</a-space>
	<br />
	<br />
	<a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block"></a-skeleton-button>
	<br />
	<br />
	<a-skeleton-image></a-skeleton-image>
	
	<a-divider></a-divider>
	
	<a-form layout="inline" style="margin: 16px 0">
		<a-form-item label="Active">
			<a-switch v-model:checked="active"></a-switch>
		</a-form-item>
		<a-form-item label="Button Block">
			<a-switch v-model:checked="block"></a-switch>
		</a-form-item>
		<a-form-item label="Size">
			<a-radio-group v-model:value="size">
				<a-radio-button value="default">Default</a-radio-button>
				<a-radio-button value="large">Large</a-radio-button>
				<a-radio-button value="small">Small</a-radio-button>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="Button Shape">
			<a-radio-group v-model:value="buttonShape">
				<a-radio-button value="default">Default</a-radio-button>
				<a-radio-button value="round">Round</a-radio-button>
				<a-radio-button value="circle">Circle</a-radio-button>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="Avatar Shape">
			<a-radio-group v-model:value="avatarShape">
				<a-radio-button value="square">Square</a-radio-button>
				<a-radio-button value="circle">Circle</a-radio-button>
			</a-radio-group>
		</a-form-item>
	</a-form>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
let listData = [];
for (let i = 0; i < 3; i++) {
	listData.push({
		href: 'https://www.antdv.com/',
		title: `ant design vue part ${i}`,
		avatar: '../static/img/antd.png',
		description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
		content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
	});
}

const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		loading1: false,
		loading2: true,
		listData,
		actions: [
			{ icon: AntdIconsVue.StarOutlined, text: '156' },
			{ icon: AntdIconsVue.LikeOutlined, text: '156' },
			{ icon: AntdIconsVue.MessageOutlined, text: '2' },
		],
		
		active: false,
		block: false,
		size: 'default',
		buttonShape: 'default',
		avatarShape: 'circle',
	}
},
methods:{
	showSkeleton(){
		this.loading1 = true;
		setTimeout(()=>{
			this.loading1 = false;
		}, 2000);
	},
	onChange(checked){
		this.loading2 = !checked;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
